Page({
	data: {
		scrollTop: 100,
		scrollLeft: 100,
		imgWidth: 0,
		imgHeight: 0,
	},

	_imgLoad(e) {
		var _self = this;
		var {
			width,
			height
		} = e.detail;

		this.setData({
			imgWidth: width,
			imgHeight: height,
		});
		setTimeout(function() {
			_self.setData({
				scrollTop: 100,
				scrollLeft: 100,
			});
		}, 500)
	},

	_scroll(e) {
		var {
			scrollLeft,
			scrollTop
		} = e.detail;

		console.log(e);

		this._scrollLeft = scrollLeft;
		this._scrollTop = scrollTop;
	},

	_touchstart(e) {
		var touches = e.touches;
		var {
			imgWidth,
			imgHeight
		} = this.data;

		this._startTouches = touches;

		this._sImgSize = {
			width: imgWidth,
			height: imgHeight
		};

		this._sLeft = this._scrollLeft;
		this._sTop = this._scrollTop;
		console.log('_touchstart', e)
	},

	_touchmove(e) {
		var scrollLeft = this._sLeft;
		var scrollTop = this._sTop;
		var {
			width: sImgWidth,
			height: sImgHeight
		} = this._sImgSize;
		var startTouches = this._startTouches;
		var touches = e.touches;

		if (startTouches.length < 2 && touches.length < 2) {
			return;
		}

		var sDifX = startTouches[0].clientX - startTouches[1].clientX;
		var sDifY = startTouches[0].clientY - startTouches[1].clientY;
		var eDifX = touches[0].clientX - touches[1].clientX;
		var eDifY = touches[0].clientY - touches[1].clientY;
		var sDis = this._cal(sDifX, sDifY);
		var eDis = this._cal(eDifX, eDifY);

		var per = eDis / sDis;

		console.log(eDis, sDis, per);

		this._mTx = -sImgWidth * (per - 1) / 2;
		this._mTy = -sImgHeight * (per - 1) / 2;

		this.setData({
			imgWidth: sImgWidth * per,
			imgHeight: sImgHeight * per,
			translateX: this._mTx,
			translateY: this._mTy,
			// scrollLeft: scrollLeft + sImgWidth * (per - 1) / 2,
			// scrollTop: scrollTop + sImgHeight * (per - 1) / 2,
		});

		// setTimeout(function() {
		// 	this.setData({
		// 		scrollLeft: scrollLeft + sImgWidth * (per - 1) / 2,
		// 		scrollTop: scrollTop + sImgHeight * (per - 1) / 2,
		// 	});
		// }, 100);

		console.log('_touchmove', e)
	},

	_touchend(e) {
		var touches = e.touches;
		var scrollLeft = this._sLeft;
		var scrollTop = this._sTop;

		if (this._mTx || this._mTy) {
			console.log('====xxxyy', scrollLeft, scrollTop, scrollLeft - this._mTx, scrollTop - this._mTy);
			this.setData({
				scrollLeft: scrollLeft - this._mTx,
				scrollTop: scrollTop - this._mTy,
				translateX: 0,
				translateY: 0,
			});

			this._mTx = 0;
			this._mTy = 0;
		}
	},


	_cal(difX, difY) {
		return Math.pow(difX * difX + difY * difY, 0.5);
	}

});